<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实现简单树形菜单</title>
    <style>
        .focus{
            color:red;
        }
        ul{
            margin:0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="content">
        <tree :folder="trees" :draggable="draggable" :select="select"></tree>
    </div>

    <script src="../date/Utils.js"></script>
    <script src="../components/components.js"></script>
    <script>

        var treeVue = new Vue({
            el: "#content",
            data: {
                trees: [],  //数据
                draggable:true, //是否可以拖拽
            },
            mounted() {
                //初始化渲染
                this.init();
            },
            methods: {
                //初始化渲染
                init() {
                    fetch("tree.json",{
                        method:'GET',
                        mode:'cors',    //允许发送跨域请求
                        credentials: 'include'
                    }).then(response=>{
                        //打印返回的json数据
                        return response.json();
                    }).then((data) => {
                        this.trees = data;
                    }).catch((e) => {
                        console.log('error: ' + e.toString());
                    });
                },
                //单击树形菜单时回调函数
                select:function(data){
                    console.log(data);
                },
                //拖动闪动效果
                timerAnimation(step) {   //step 间隔秒数
                    this.thisDrag.focus = true;
                    this.timer = setInterval(() => {
                        this.thisDrag.focus ? this.thisDrag.focus = false : this.thisDrag.focus = true;
                    }, step * 1000);
                },
                //停止拖动闪动效果
                timerAnimationStop() {
                    clearInterval(this.timer);
                    this.thisDrag.focus = false;
                }
            }
        });
    </script>
</body>

</html>